<template>
	<view class="content bg-light" style="height: 100%;">
		<tabsTop tabName="小康币商城"></tabsTop>
		<view class="zong">
			<view class="top">
				<!-- 可用小康币 -->
				<view class="coins">
					<view class="coins_title">可用小康币</view>
					<view class="coins_con">
						<view class="coin">{{number}}</view>
						<view class="other">
							<view class="coin_details">
								<image class="icon" :src="details_icon"></image>
								<view class="details_title">小康币明细</view>
							</view>
							<view class="coin_details">
								<image class="icon" :src="rules"></image>
								<view class="details_title">规则</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 积分商城 -->
				<view v-if="hasAvailableActivities" class="jifen bg-white">
					<view class="mall">
						<view class="pointsMall">积分商城</view>
						<view class="point-text" @click="pointMall">
							<text class="">进入</text>
						</view>
					</view>
					<view class="goods">
						<view v-for="(item,index) in product" :key="index" class="good">
							<view class="good_img w-100">
								<image :src="Domain_IMG+item.Picture_URL" mode="aspectFit" :alt="item.name" class="img">
								</image>
							</view>
							<view class="product-name text-ellipsis">{{item.Article_Name}}</view>
							<view class="product-price">￥{{item.specifications[0].Sales_Unit_Price}}</view>
						</view>
					</view>
				</view>
				<!-- 没有积分商城 -->
				<view v-else class="bg-white">
					<view class="text">暂无可兑换活动</view>
				</view>
			</view>
			<!-- 小康币明细 -->
			<view class="coins_details">
				<view class="details">最近小康币明细</view>
				<view class="head" v-if="screenWidth > 480">
					<view>获取方式</view>
					<view>日期</view>
					<view>明细</view>
				</view>
				<view class="coins_list" v-if="coinsDetails.length > 0">
					<view v-for="(item,index) in coinsDetails" :key="index" class="coins_item">
						<view class="item">
							<view class="getIt">{{item.getIt}}</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="num">{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor></botSponsor>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import {
		getWX2GoodsIdAction
	} from "@/api/index.js"
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor // 底部赞助商
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_ICON: app.globalData.Domain_ICON,
				number: '',
				screenWidth: uni.getSystemInfoSync().windowWidth,
				rules: app.globalData.Domain_ICON + '/rules.png',
				details_icon: app.globalData.Domain_ICON + '/details_icon.png',
				hasAvailableActivities: true, // 初始时假定没有可兑换活动
				tabs: ["小康币收支明细", "7天即将过期小康币明细"],
				coinsDetails: [{
						getIt: '日常签到',
						time: '2024-04-10 11:31:00',
						num: '+1',
					},
					{
						getIt: '日常签到',
						time: '2024-04-08 11:31:00',
						num: '+1',
					},
				],
				product: [],
				page: 1, // 商品页数
				limit: 3, // 每次刷新的条数
			}
		},
		onLoad(options) {
			const number = decodeURIComponent(options.amount)
			this.number = number
			this.getHwyxGoods();
		},
		methods: {
			// 点击跳转积分商城页面
			pointMall() {
				uni.navigateTo({
					url: '/pages/index/index?param=point'
				});
			},
			// 好物优选的商品查询
			async getHwyxGoods() {
				const res = await this.getGoods('C10000000000002');
				this.product = res.tableData
			},
			// 商品查询
			async getGoods(Id) {
				var canshu = {
					...this.canshu
				};
				canshu.ShopColumn_Id = Id;
				canshu.page = this.page;
				canshu.limit = this.limit;
				const res = await getWX2GoodsIdAction(canshu);
				if (res.Status = 'success') {
					return res;
				};
			},
		}
	}
</script>

<style>
	/* 在pc端应用的样式 */
	@media (min-width: 481px) {
		.icon {
			width: 20px;
			height: 20px;
		}

		.top {
			display: flex;
			background-color: white;
			padding: 20rpx;
		}

		.coins_title {
			text-align: center;
			font-size: 40rpx;
			padding: 40rpx;
		}

		.coins {
			width: 40%;
			border-right: 2rpx solid #e4e7e8;
			padding: 40rpx;
		}

		.other {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 40rpx;
		}

		.coin_details {
			display: flex;
			align-items: center;
		}

		.coin {
			text-align: center;
			font-size: 50rpx;
			padding: 40rpx;
		}

		.jifen {
			width: 60%;
		}

		.mall {
			height: 80rpx;
			border-radius: 20rpx;
			border: 2px solid aliceblue;
			/* background-color:#F8F3F7; */
			margin: 10rpx auto;
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.point-text {
			width: 80rpx;
			height: 40rpx;
			background-color: green;
			font-size: 0.8rem;
			text-align: center;
			border-radius: 20rpx;
			margin-top: 30rpx;
			color: aliceblue;
		}

		.coins_details {
			background-color: white;
			margin-top: 20rpx;
		}

		.details {
			font-size: 39rpx;
			margin: 20rpx;
			font-weight: bold;
			margin-top: 20rpx;
			padding-top: 20rpx;
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;
			margin: 0 20rpx;
		}

		.coins_item {
			display: flex;
			padding: 40rpx;
			margin: 0px 20rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #e4e7e8;
		}

		.item {
			display: flex;
			justify-content: space-between;
			width: 60%;
		}

		.coins_item:last-child {
			border-bottom: none;
		}

		.getIt {
			font-size: 32rpx;
		}

		.time {
			font-size: 28rpx;
		}

		.num {
			color: red;
		}

		.product-name,
		.product-price {
			font-size: 16px;
		}

		.product-price {
			color: #FF5722;
			font-weight: 700;
		}

		.goods {
			display: flex;
			padding: 20rpx;
		}
		.good{
			width: 33%;
			margin-right: 20rpx;
			border: 2rpx solid #e4e7e8;
			padding: 10rpx;
			border-radius: 10rpx;
		}
		.good_img{
			height: 250rpx;
		}
	}

	/* 在手机端应用的样式 */
	@media (max-width: 480px) {
		.icon {
			width: 20px;
			height: 20px;
		}

		.zong {
			min-height: 1150rpx;
		}

		.top {
			background-color: white;
		}

		.text {
			position: absolute;
			top: 50%;
			left: 40%;
			font-size: 12px;
		}

		.coins {
			padding: 10rpx;
			border-bottom: 1px solid #e4e7e8;
		}

		.coins_title {
			padding: 10rpx;
			font-size: 13px;
		}

		.coins_con {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			align-items: center;
		}

		.coin {
			font-size: 42rpx;
		}

		.other {
			display: flex;
		}

		.coin_details {
			display: flex;
		}

		.details_title {
			font-size: 26rpx;
		}

		.mall {
			width: 95%;
			height: 80rpx;
			border-radius: 20rpx;
			border: 2px solid aliceblue;
			/* background-color:#F8F3F7; */
			margin: 10rpx auto;
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.point-text {
			width: 80rpx;
			height: 40rpx;
			background-color: green;
			font-size: 0.8rem;
			text-align: center;
			border-radius: 20rpx;
			margin-top: 30rpx;
			color: aliceblue;
		}

		.coins_details {
			background-color: white;
			margin-top: 20rpx;
		}

		.details {
			font-size: 39rpx;
			margin: 20rpx;
			font-weight: bold;
			margin-top: 20rpx;
			padding-top: 20rpx;
		}

		.coins_item {
			display: flex;
			margin: 20rpx;
			padding: 20rpx 0rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #e4e7e8;
		}

		.coins_item:last-child {
			border-bottom: none;
		}

		.getIt {
			font-size: 32rpx;
		}

		.time {
			font-size: 28rpx;
		}

		.num {
			color: red;
		}

		.product-name,
		.product-price {
			font-size: 16px;
		}

		.product-price {
			color: #FF5722;
			font-weight: 700;
		}
		.goods {
			display: flex;
			padding: 20rpx;
			width: 82%;
		}
		.good{
			width: 33%;
			margin-right: 20rpx;
			border: 2rpx solid #e4e7e8;
			padding: 10rpx;
			border-radius: 10rpx;
			height: 283rpx;
		}
		.img{
			width: 180rpx;
			height: 180rpx;
		}
		.good_img{
			height: 186rpx;
		}
	}
</style>